import React, { useEffect, useState } from 'react';
import { Button, Select, Checkbox, Form, Input, Row, Col, TreeSelect } from 'antd';
import { getAllProduct } from '../../../apis/Product';
import ComTreeSelect from './ComTreeSelect';

const { Option } = Select;
type Props = {
    updateDate: (val: [], total: number) => void
}

const Search = ({ updateDate }: Props) => {

    const [form] = Form.useForm();
    const [goodstypeId, steGoodstypeId] = useState<any>(null);

    //搜索
    const onFinish = async (values: any) => {
        const val = { ...values, goodstypeId, status: values.status == '0' ? '下架' : values.status == '1' ? '上架' : null }
        console.log('val', val)
        const res = await getAllProduct(val)
        updateDate((res as any).data.rows, (res as any).data.total)
    };

    const changeGoodsId = (id: string | undefined | null) => {
        steGoodstypeId(id)
    }
    //重置数据
    const cleaerAll = async () => {
        form.setFieldsValue({ 'name': '', 'status': null })
        steGoodstypeId(null)
        const res = await getAllProduct()
        updateDate((res as any).data.rows, (res as any).data.total)
    }

    return (
        <div>
            <Form
                name="basic"
                form={form}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Row>
                    <Col span={8}>
                        <Form.Item
                            label="商品名称"
                            name="name"
                        >
                            <Input placeholder='请输入名称' style={{ width: '200px' }} allowClear={true} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="商品状态"
                            name="status"
                        >
                            <Select className='r-Fitem ' placeholder='请选择状态' style={{ width: '200px' }}
                                allowClear={true}>
                                <Option value='1'>上架</Option>
                                <Option value='0'>下架</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="商品类型"
                            name="goodstypeId"
                            style={{ width: '300px' }}
                        >
                            <ComTreeSelect changeGoodsId={changeGoodsId} goodstypeId={goodstypeId}></ComTreeSelect>
                        </Form.Item>
                    </Col>

                    <Col span={12}>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            &nbsp;&nbsp;
                            <Button onClick={cleaerAll}>
                                重置
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    );
}

export default Search;